<template>
    <div class="body">
        <p class="iconfont icon-guanbi1 close" @click="close"></p>
        <p class="title">{{alert?'修改商品':'新增商品'}}</p>
        <!-- <p>{{alert}}</p>    -->
        <section class="login_message" v-show="!alert">
            <input type="text" placeholder="选择商品分类" v-model="cate.name" readonly @click="onShowUpload">
            <ul class="up_load" v-show="isShowUpload">
                <li v-for="(i,key) of uploadList" :key="key" @click="onCateSelected(i)">{{i.name}}</li>
                <li>没有更多分类了~</li>
            </ul>
        </section>
        <section class="login_message">
            <input type="text" placeholder="输入商品名称" v-model="name" v-if="!alert">
            <input type="text" placeholder="输入商品名称" v-model="alert.name" v-else>
        </section>
        <section class="login_message">
            <input type="number" placeholder="输入商品价格,请精确到小数点后两位" v-model="price" v-if="!alert">
            <input type="number" placeholder="输入商品价格,请精确到小数点后两位" v-model="alert.price" v-else>
        </section>
        <section class="login_message">
            <input type="text" placeholder="输入商品详细描述" v-model="detail" v-if="!alert">
            <input type="text" placeholder="输入商品详细描述" v-model="alert.detail" v-else>
        </section>
        <section class="login_message">
            <input type="number" placeholder="输入商品库存" v-model="stock" v-if="!alert">
            <input type="number" placeholder="输入商品库存" v-model="alert.stock" v-else>
        </section>
        <section class="login_message" v-if="cate.type == 2 || alert.type == 2">
                <input type="num" v-model="meat_num" placeholder="荤菜可选总数"  v-if="!alert"/>
                <input type="num" v-model="alert.meat_num" placeholder="荤菜可选总数" v-else>
        </section>
        <section class="login_message" v-if="cate.type == 2 || alert.type == 2">
                <input type="num" v-model="veg_num" placeholder="荤菜可选总数"  v-if="!alert"/>
                <input type="num" v-model="alert.veg_num" placeholder="荤菜可选总数" v-else>
        </section>
        <!-- <div class="spec" v-if="cate.type == 2 || alert.type == 2">
            <p class="spec-title">素菜:
                <input type="num" v-model="veg_num" placeholder="可选总数"  v-if="!alert"/>
                <input type="num" v-model="alert.veg_num" placeholder="可选总数" v-else>
                </p>
            <div class="veg-meat" v-if="!alert">
                <div v-for="(item,index) of veg_text" :key="index" class="greens-input">
                    <input type="text" placeholder="商品名称" v-model="veg_text[index]" />
                    <i class="iconfont icon-guanbi1 close" @click="delItem(0,0,veg_text[index])"></i>
                </div>
                <i class="iconfont icon-tianjia" @click="addItem(0,0)"></i>
            </div>
            <div class="veg-meat" v-else>
                <div v-for="(item,index) of getVegList(alert.veg_text)" :key="index" class="greens-input">
                    <input type="text" placeholder="商品名称" v-model="alert.veg_text[index]" />
                    <i class="iconfont icon-guanbi1 close" @click="delItem(0,1,alert.veg_text[index])"></i>
                </div>
                <i class="iconfont icon-tianjia" @click="addItem(0,1)"></i>
            </div>
            <p class="spec-title">荤菜:
                <input type="num" v-model="meat_num" placeholder="可选总数"  v-if="!alert"/>
                <input type="num" v-model="alert.meat_num" placeholder="可选总数" v-else>
                </p>
            <div class="veg-meat"  v-if="!alert">
                <div v-for="(item,index) of meat_text" :key="index" class="greens-input">
                    <input type="text" placeholder="商品名称" v-model="meat_text[index]" />
                    <i class="iconfont icon-guanbi1 close" @click="delItem(1,0,meat_text[index])"></i>
                </div>
                <i class="iconfont icon-tianjia" @click="addItem(1,0)"></i>
            </div>
            <div class="veg-meat"  v-else>
                <div v-for="(item,index) of getMeatList(alert.meat_text)" :key="index" class="greens-input">
                    <input type="text" placeholder="商品名称" v-model="alert.meat_text[index]" />
                    <i class="iconfont icon-guanbi1 close" @click="delItem(1,1,alert.meat_text[index])"></i>
                </div>
                <i class="iconfont icon-tianjia" @click="addItem(1,1)"></i>
            </div>
        </div> -->
        <div class="pic_content">
            <img :src="$store.getters.base_url+alert.pic" alt="">
        </div>
        <section class="login_message upload_img" :class="alert==0?'':'hidden'">
            <Upload ref="upload" title="商品图片" subTitle="请拍摄商品上传，保存图片为正方形，并注意减少反光" @getImg="getImg" width="7rem" height="7rem"></Upload>
        </section>
        <section class="btn-group">
            <mt-button class="btn" @click="AddGoods" v-show="!alert">添加商品</mt-button>
            <mt-button class="btn" @click="changeGoods" v-show="alert">修改商品</mt-button>
            <mt-button class="btn" @click="goodOut">{{alert.is_out?'商品出货':'商品售罄'}}</mt-button>
            <mt-button class="btn" @click="goodsShow">{{alert.is_show?'商品下架':'商品上架'}}</mt-button> 
        </section>
    </div>
</template>
<script>
import Upload from "../components/upload";
import {storeGetList,AddGoods,EditGoods,goodOut,goodsShow} from '../api';
import {Toast} from 'mint-ui'
export default {
    name:"addGoods",
    props:['alert'],
    data() {
        return {
            isShowUpload:false,
            uploadList:[],
            cate:[],
            name:"",
            pic:"",
            price:Number,
            detail:"",
            stock:"",
            veg_text:[],
            meat_text:[],
            meat_num:0, //荤菜个数
            veg_num:0 //素菜个数
        }
    },
    components:{Upload},
    created(){
        this.getStoreList();
    },
    methods:{
        goodOut(){
            const data = {
                token:this.$store.getters.token,
                goods_id:this.alert.id,
                is_out:this.alert.is_out?0:1
            }
            goodOut(data).then(res=>{
                Toast(res.msg);
                if(res.code == 200){
                    this.alert.is_out = data.is_out
                }
            })
        },
        goodsShow(){
            const data = {
                token:this.$store.getters.token,
                goods_id:this.alert.id,
                is_show:this.alert.is_show?0:1
            }
            goodsShow(data).then(res=>{
                Toast(res.msg);
                if(res.code == 200){
                    this.alert.is_show = data.is_show
                }
            })
        },
        // addItem(i,a){
        //     if(i && !a){
        //         this.meat_text.push('');
        //     }else if(!i && !a){
        //         this.veg_text.push('');
        //     }else if(i && a){
        //         this.alert.meat_text.push('');
        //     }else{
        //         this.alert.veg_text.push('');
        //     }
        // },
        // delItem(i,a,item){
        //     let b = 0;
        //     if(i && !a){
        //         b=this.meat_text.indexOf(item);
        //         this.meat_text.splice(b,1)
        //     }else if(!i && !a){
        //         b=this.veg_text.indexOf(item);
        //         this.veg_text.splice(b,1)
        //     }else if(i && a){
        //         b=this.alert.meat_text.indexOf(item);
        //         this.alert.meat_text.splice(b,1)
        //     }else{
        //         b=this.alert.veg_text.indexOf(item);
        //         this.alert.veg_text.splice(b,1)
        //     }
        // },
        getImg(data){
            if(!this.alert){
                this.pic = data[0];
            }else{
                this.alert.pic = data[0]
            }
        },
        changeGoods(){
            const data = {
                token:this.$store.getters.token,
                goods_id:this.alert.id,
                name:this.alert.name,
                pic:this.alert.pic,
                price:this.alert.price,
                detail:this.alert.detail,
                stock:this.alert.stock,
                type:this.alert.type,
            }
            if(data.type == 2){
                // data.meat_text=this.alert.meat_text.toString();
                // data.veg_text=this.alert.veg_text.toString();
                data.meat_num=this.alert.meat_num;
                data.veg_num=this.alert.veg_num;
                if(data.meat_num <= 0){
                    Toast('请输入该套餐内荤菜数量');
                    return;
                }else if(data.veg_num <= 0){
                    Toast('请输入该套餐内素菜数量');
                    return;
                }
            }
            if(!data.name){
                Toast("请输入商品名称")
                return;
            }else if(!data.pic){
                Toast("请添加商品图片")
                return;
            }else if(!data.price){
                Toast("请输入商品价格")
                return;
            }else if(!data.detail){
                Toast("请输入该商品的描述")
                return;
            }
            EditGoods(data).then(res=>{
                console.log(res);
                if(res.code!==200){
                    Toast(res.msg)
                }else{
                    Toast(res.msg)
                    this.close();
                }
            })
        },
        AddGoods(){
            // console.log(this.$refs.upload.headerImage);
            const data = {
                token:this.$store.getters.token,
                cate_id:this.cate.id,
                name:this.name,
                pic:this.pic,
                price:this.price,
                detail:this.detail,
                stock:this.stock,
                type:this.cate.type,
                // meat_text:this.meat_text.toString(),
                // veg_text:this.veg_text.toString(),
                meat_num:this.meat_num,
                veg_num:this.veg_num
            }
            if(data.type == 2){
                if(data.meat_num <= 0){
                    Toast('请输入该套餐内荤菜数量');
                    return;
                }else if(data.veg_num <= 0){
                    Toast('请输入该套餐内素菜数量');
                    return;
                }
            }
            if(!data.cate_id){
                Toast("请选择添加商品的分类")
                return;
            }else if(!data.name){
                Toast("请输入商品名称")
                return;
            }else if(!data.pic){
                Toast("请添加商品图片")
                return;
            }else if(!data.price){
                Toast("请输入商品价格")
                return;
            }else if(data.price <= 0){
                Toast("请输入正确的商品价格")
                return;
            }else if(!data.detail){
                Toast("请输入该商品的描述")
                return;
            }else if(data.type == 2){
                // if(!data.meat_num){
                //     Toast('请选择荤菜可选数量');
                //     return;
                // }else if(!data.meat_text){
                //     Toast('请输入荤菜商品');
                //     return;
                // }else if(!data.veg_num){
                //     Toast('请选择素菜可选数量');
                //     return;
                // }else if(!data.veg_text){
                //     Toast('请输入素菜商品');
                //     return;
                // }else if(data.veg_num > this.veg_text.length || data.meat_num > this.meat_text.length){
                //     Toast('商品少于可选数量');
                //     return;
                // }
                // for(let i of this.veg_text){
                //     if(i == ''){
                //         Toast('请输入素菜名称');
                //         return;
                //     }
                // }
                // for(let i of this.meat_text){
                //     if(i == ''){
                //         Toast('请输入荤菜名称');
                //         return;
                //     }
                // }
            }
            AddGoods(data).then(res=>{
                console.log(res)
                if(res.code !== 200){
                    Toast(res.msg);
                    this.close();
                }else{
                    this.cate_id = "";
                    this.cate.name = "";
                    this.name = "";
                    this.pic = "";
                    this.price = "";
                    this.detail = "";
                    this.stock = "";
                    this.$refs.upload.headerImage = "";
                    this.veg_text = [];
                    this.veg_num = 0;
                    this.meat_num = 0;
                    this.meat_text = [];
                    Toast("商品添加成功");
                    this.close();
                }
            })
        },
        close(){
            this.$emit('close');
        },
        onCateSelected(i){
            console.log(i);
            this.isShowUpload = !this.isShowUpload
            this.cate = i;
        },
        onShowUpload(){  
            this.isShowUpload = !this.isShowUpload
        },
        getStoreList(){
            const data = {token:this.$store.getters.token}
            storeGetList(data).then(res=>{
                this.uploadList = res.data;
            })
        }
    }
}
</script>
<style scoped>
    .body{
        width: 100%;
        height: 100vh;
        background: #FFF;
        text-align: center;
        overflow:auto
    }
    .title{
        line-height: 6rem;
        font-size: 1.5rem;
    }
    .spec{
        width: 90%;
        margin: auto;
        padding: 1rem;
        font-size: 1rem;
        text-align: left;
    }
    .spec .iconfont{
        font-size: 2rem;
    }
    .spec .greens-input{
        border: 1px solid dodgerblue;
        width: 4rem;
        /* text-align: center; */
        border-radius: 10px;
        line-height: 2rem;
        margin:0.2rem;
        /* overflow: hidden; */
        position: relative;
    }
    .spec .greens-input input{
        width: 100%;
        height: 100%;
        text-align: center;
    }
    .spec .veg-meat{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .spec-title{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .spec-title input{
        width: 4rem;
        text-align: center;
        border-bottom: 1px solid #ccc;
        line-height: 1.4rem;
    }
    .spec .close{
        position: absolute;
        top: 0rem;
        right: -0.4rem;
        font-size: 1rem;
        line-height: 0.4rem;
    }
    .up_load{
        width: 80%;
        margin: auto;
        list-style-type: none;
        text-align: left;
        border: 1px solid #ccc;
        border-radius: 5px;
        max-height: 10rem;
        overflow: auto;
        position: absolute;
        left: 10%;
        z-index: 100;
        background: #FFF;
    }
    .up_load li{
        height: 2rem;
        /* border:1px solid red; */
        padding: 0 1rem;
        line-height: 2rem;
        border-bottom:1px solid #ccc;

    }
    .close {
        position: absolute;
        right: 1rem;
        top: 1rem;
        font-size: 1rem;
        color: #333;
        font-weight: bolder;
        z-index: 1000;
    }
    .pic_content{
        width: 7rem;
        height:7rem;
        text-align: center;
        margin:2rem auto;
    }
    .pic_content img{
        width: 100%;
        height: 100%;
        border-radius: 5px;
    }
    .upload_img{
        display: inline-block;
        /* margin: auto; */
        text-align: center;
        position: relative;
        top: -9.5rem;
        /* margin-top: -9.5rem; */
    }
    .hidden{
        opacity: 0;
    }
    .btn{
        background: #fff;
        border: 0.04rem solid #F0463C;
        color: #F0463C;
    }
    .btn-group{
        margin-top: -6rem;
    }
</style>